<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick } from 'vue'

/**
 * 如何理解生命周期钩子？
 *  框架提供给开发者，在特定时机注册自定义逻辑的一种机制
 *  比如希望在组件创建完毕之后执行逻辑可以用 created（选项式api 中的写法）,组合 api，直接写在 script 中即可
 *  比如希望在dom 组件渲染完毕之后可以用 mounted
 *  比如销毁的时候可以用 unmounted
 *  除此以外还有一些其他的钩子，但是在开发中用的不多，记得不太熟
 * */

onMounted(() => {
  console.log('mounted')
})

const isShow = ref(false)
const imgRef = ref(null)

/**
 * Vue数据更新，到页面更新是异步的
 * 默认使用的是微任务队列，如果我们要页面更新之后再去获取对应的 Dom 元素
 * 不能直接去获取要稍微等一会
 * 可以 用 setTimeout，也可以用 promise
 * */
const toggleShow = () => {
  isShow.value = !isShow.value

  // 可以用 nextTick
  // 他内部就会在下一次事件循环的时候执行
  // 数据，及 UI 更新完毕之后再执行，可以用来获取更新之后的 dom 元素
  nextTick(() => {
    console.log(imgRef)
  })

  // 用 Promise 也可以，并且比定时器快一些
  // const p = new Promise((resolve, reject) => {
  //   resolve()
  // })
  // p.then(res => {
  //   console.log(imgRef)
  // })

  // 宏任务
  // setTimeout(() => {
  //   console.log(imgRef)
  // }, 0)
}
</script>
<template>
  <h2>第五页(ref,生命周期钩子)</h2>
  <button @click="toggleShow">切换显示</button>
  <br />
  <img
    v-if="isShow"
    ref="imgRef"
    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F1e110913-6a10-bdcd-2c63-4509b425cdb2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1734599879&t=9ac4d0e7159534c5e1d830f3c671242e"
    alt=""
  />
</template>
<style scoped>
img {
  width: 300px;
}
</style>
